<template>
  <!--
  1. input框显示的value 要以v-model绑定的数据为主 (搞定)
  2. 输入框中输入新数据的时候 把新数据同步到v-model绑定的数据上

  三个事儿
   1. modelValue 属性
   2. update:modelValue的事件
   3. 触发事件自动会把事件参数 同步赋值给v-model绑定的数据
  -->
  <input type="text" :value="_value" @input="inputChange"/>
  {{test}}
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: {
    modelValue: {
      type: String
    },
    test: {
      type: String
    }
  },
  setup (props, { emit }) {
    // 初始化的时候以传入的为主
    const _value = ref(props.modelValue)
    // 变化时继续保持同步
    watch(() => {
      return props.modelValue
    }, () => {
      _value.value = props.modelValue
    })

    const inputChange = (e) => {
      // e.target.value:用户输入的最新的数据
      // 同步到v-model绑定的数据上去
      // 触发事件 并且把数据传出去
      emit('update:modelValue', e.target.value)
      emit('update:test', e.target.value)
    }
    return {
      _value,
      inputChange
    }
  }
}
</script>
